<template>
    <div>
        <div id="PieChart"></div>
    </div>
</template>

<script>
    import Highcharts from 'highcharts/highstock';
    export default {
        name: "",
        mounted() {
            this.moreChart();
        },
        methods: {
            moreChart() {
                if (this.chart) {
                    this.chart.destroy();
                }
                // 创建渐变色
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                });
                // 构建图表
                var chart = Highcharts.chart('PieChart',{ // eslint-disable-line no-unused-vars
                    title: {
                        text: 'hhhh链接各浏览器访问量占比'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                },
                                connectorColor: 'silver'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '浏览器占比',
                        data: [
                            ['Firefox',   45.0],
                            ['IE',       26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari',    8.5],
                            ['Opera',     6.2],
                            ['其他',   0.7]
                        ]
                    }],

                    credits: {
                        enabled: false     //不显示LOGO
                    }
                });

            }

        }
    }
</script>

<style>

</style>